<template>
  <div>
    <h2>
      <a-row>
        <a-col span="8">
          <a-input :value="option.title" @change="onChange($event.target.value, 'title')"></a-input>
        </a-col>
        <a-col span="16">
          <a-button type="link" @click.stop="addRow" v-if="!option.isTable">添加行</a-button>
          <a-checkbox
            v-if="!option.isTable"
            :checked="option.isAddable"
            style="color: #13c2c2"
            @change="onChange($event.target.checked, 'isAddable')">允许新增</a-checkbox>
          <a-checkbox
            :checked="option.isTable"
            style="color: #13c2c2"
            @change="onChange($event.target.checked, 'isTable')">列数据展示</a-checkbox>
          <a-button type="link" @click.stop="cloneOption">复制</a-button>
          <a-button type="link" @click.stop="removeOption">移除</a-button>
        </a-col>
      </a-row>
    </h2>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  props: ['option'],
  name: 'formPanel',
  methods: {
    onChange(value, prop) {
      if (prop === 'isTable') {
        this.$emit('rowClear', this.option);
        this.addRow();
      }
      this.$emit('valueChanged', value, prop, this.option);
    },
    removeOption() {
      this.$emit('removeOption');
    },
    cloneOption() {
      this.$emit('cloneOption');
    },
    addRow() {
      this.$emit('addRow');
    }
  }
};
</script>
